 <template>
    <div>
      <div class="bgcontent">
        <el-button class="bgIcon" @click="showCheck">更多</el-button>
        <div class="content" v-show="check">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div>
         <el-table
          :data="reset"
          border
          style="width: 100%"
          @selection-change="change">
          <el-table-column
            fixed
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            fixed
            prop="UserID"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="RealName"
            label="姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="UserName"
            label="账号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="Statu"
            label="在职状态"
            :formatter="statu"
            width="120">
          </el-table-column>
          <!-- <el-table-column
            prop="city"
            label="公司名称"
            width="150">
          </el-table-column> -->
          <el-table-column
            prop="DepartmentName"
            label="部门"
            width="150">
          </el-table-column>
          <el-table-column
            prop="RoleName"
            label="角色"
            width="110">
          </el-table-column>
          <el-table-column
            prop="MobilePhone"
            v-if="showPhone"
            label="手机"
            width="150">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="企业微信"
            v-if="showWX"
            width="120">
          </el-table-column>
          <!-- <el-table-column
            prop="zip"
            label="产线工位"
            width="140">
          </el-table-column> -->
          <el-table-column
            prop="Sex"
            label="性别"
            v-if="showSex"
            width="110">
          <template slot-scope="scope">
              <span>{{scope.row.Sex==0? '男':'女'}}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="CreateByFormat"
            label="创建人"
            width="110">
          </el-table-column>
          <el-table-column
            prop="CreateTime"
            label="创建时间"
            width="200">
          </el-table-column>
          <el-table-column
            prop="LastModifyByFormat"
            label="修改人"
            width="110">
          </el-table-column>
          <el-table-column
            prop="LastModifyTime"
            min-width="200"
            label="修改时间"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>

  <script>
   const cityOptions = ['手机', '企业微信', '性别'];
    export default {
      props:{
        reset:{
          type:Array,
          required:true
        }
      },
      data() {
        return {
          check:false,   //点击显示 字段显示
          // duo选
        checkAll: false,
        checkedCities: [],   //默认显示
        cities: cityOptions,
        isIndeterminate: true
        }
      },
      methods:{
        showCheck(){
          this.check=!this.check
        },
        statu(row, column, cellValue, index){
          if(row.Statu==0){
            return "在职"
          }else{
            return "离职"
          }
        },
         handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        change(val){
          this.$emit('changeData',val)
          let listId=[]
          val.forEach(el => {
              listId.push(el.UserID)
          });
          this.$emit('getId',listId)
          
        }
      },
      computed:{
        showPhone(){
          if(this.checkedCities.indexOf('手机')!==-1){
            return true
          }else{
            return false
          }
        },
        showWX(){
          if(this.checkedCities.indexOf('企业微信')!==-1){
            return true
          }else{
            return false
          }
        },
        showSex(){
          if(this.checkedCities.indexOf('性别')!==-1){
            return true
          }else{
            return false
          }
        }
      }
    }
  </script>

  <style lang="scss" scoped>
  .bgcontent{
    width:100%;
    height: 40px;
    position: relative;
    .content{
      position: absolute;
      right: 0;
      top: 40px;
      width:120px;
      height: 120px;
      background: #ffffff;
      border:1px solid #dcdfe6;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      z-index: 100;
      border-radius: 5px;
    }
    .bgIcon{
    position: absolute;
    right: 0;
    top: 0px;
   }
  }
  
  </style>
  